<template>
<div>
  <van-nav-bar title="住院人管理" left-text="返回"
               left-arrow  @click-left="back"/>
  <div>
    <div>
      <van-notice-bar
          left-icon="volume-o"
          text="亲爱的，最多只能添加五个住院人信息！"
      />
    </div>
    <div v-for="h in hospitalizeds" style="width: 90%;margin-left: 5%;background-color: aliceblue" @click="detail(h)">
      <van-row style="margin-top: 20px">
        <van-col span="16">
          <div style="font-size: 20px;font-weight: bold;margin-top: 20px;text-align: left;margin-left: 30px">{{h.name}}</div>
          <div class="dv1">住院号：{{h.no}}</div>
          <div class="dv1">就诊卡号：{{h.cardno}}</div>
          <div class="dv1">入院时间：{{h.stime}}</div>
          <div class="dv1">出院时间：{{h.etime}}</div>
        </van-col>
        <van-col span="6" offset="2">
          <van-tag class="dv2" v-if="h.flag==1" type="success">住院中</van-tag>
          <van-tag class="dv2" v-else-if="h.flag==2" type="danger">已出院</van-tag>
          <van-tag class="dv2" v-else type="primary">以转院</van-tag>
        </van-col>
      </van-row>
    </div>

    <van-button style="margin-top: 20px;width: 90%;margin-left: 5%" type="primary" block @click="tz">
      绑定新住院号
    </van-button>
  </div>
</div>
</template>

<script setup>
import {ref,onMounted} from "vue";
import axios from "axios";
import {useStore} from 'vuex'
import {useRouter} from "vue-router";

const store=useStore()
const router = useRouter()
const hospitalizeds=new ref([])

const ck=ref(true)
onMounted(()=>{
  //请求接口 axios
  axios.get("hospitalized/list?uid="+store.state.user.id).then(res=>{
    if(res.data.code==0){
      hospitalizeds.value=res.data.data;
    }
  });
})
const back=()=>{
  history.back();
}
const tz = () => {
  router.push("/bindpatientlist")
}
const detail=(obj)=>{
  store.commit("setHospitalized",obj);
  router.push("/hospitalized");
}
</script>

<style scoped>
.dv1{
  font-size: 10px;
  margin-top: 6px;
  text-align: left;
  margin-left: 20px;
  color: darkslategray;
}
.dv2{
  margin-top: 30px;
  border-radius: 20px;
  padding: 5px;
}
</style>
